<template>
	<div class="container">
		<div class="header">
			<router-link to="">
				<i class="iconfont icon-back" @click="$router.back()"></i>
			</router-link>
			<input type="text" placeholder="请输入搜索的关键字..." ref="input" />
			<button @click="search.name = $refs.input.value.trim()"><i class="iconfont icon-search"></i></button>
		</div>
		<div class="order">
			<div class="order-item" :class="{ active: search.orderCol === 'price' }" @click="changeOrder('price')">
				<span>价格</span>
				<i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
			</div>
			<div class="order-item" :class="{ active: search.orderCol === 'sale' }" @click="changeOrder('sale')">
				<span>销量</span>
				<i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
			</div>
			<div class="order-item" :class="{ active: search.orderCol === 'rate' }" @click="changeOrder('rate')">
				<span>评价</span>
				<i class="iconfont icon-asc" v-show="search.orderDir === 'asc'"></i>
				<i class="iconfont icon-desc" v-show="search.orderDir === 'desc'"></i>
			</div>
		</div>
		<div class="content">
			<ul ref="list">
				<li v-for="item in list" :key="item.id">
					<div class="a">
						<img :src="item.avatar" class="content-img" alt="" @click="detail(item.id)">
						<div>
							<p class="name">{{ item.name }}</p>
							<p class="brief">{{ item.brief }}</p>
							<p class="price">￥{{ item.price }}.00起</p>
							<p class="sale">月销：{{ item.sale }}件 好评：{{ item.rate }}条</p>
						</div>
					</div>


				</li>
			</ul>
			<p class="tip" ref="tip" v-text="tip"></p>
		</div>
	</div>
</template>
<script>
import imagesloaded from "imagesloaded";
import { ProductApi } from "@/api";


export default {
	name: "List",
	data() {
		return {
			search: {
				name: "",
				cid: parseInt(this.$route.params.params),
				orderCol: "price",
				orderDir: "asc",
				begin: 0,
				pageSize: 6
			},
			list: [],
			hasMore: true,
			isLoading: false,
		};
	},
	methods: {
		async getData(isLoadMore) {
			try {
				this.isLoading = true;
				const result = await ProductApi.getList(isLoadMore ? Object.assign({}, this.search, { begin: this.list.length }) : this.search)
				await new Promise(resolve => setTimeout(() => resolve(result), 1000));
				this.hasMore = result.length === this.search.pageSize;
				this.list = isLoadMore ? this.list.concat(result) : result;
				this.isLoading = false;
			} catch (e) {/**/ }

		},
		detail(id) {
			const cid = id;
			this.$router.push({ path: `/Detail/${cid}` });
		},
		changeOrder(col) {
			if (col === this.search.orderCol)
				this.search.orderDir = this.search.orderDir === "asc" ? "desc" : "asc";
			else
				this.search.orderCol = col;
			this.getData();
		}
	},
	computed: {
		tip() {
			if (this.isLoading)
				return "加载中..";
			else if (this.list.length === 0)
				return "暂无相关商品，敬请期待";
			else if (this.hasMore)
				return "上拉加载更多";
			else
				return "已到达底部"
		}
	},

	watch: {
		search: {
			handler() {
				if (this.io) this.io.unobserve(this.$refs.tip);
				this.list = [];
				this.getData(false);
			},
			immediate: true,
			deep: true,
		},
		list: function (newValue) {
			if (newValue.length === 0) return;
			if (!this.hasMore) return;
			this.$nextTick(function () {
				imagesloaded(this.$refs.list, () => {
					this.io.observe(this.$refs.tip);
				});
			});
		}
	},
	mounted() {
		this.io = new IntersectionObserver(
			arr => {
				if (arr[0].isIntersecting) {
					this.io.unobserve(this.$refs.tip);
					this.getData(true);
				}
			},
			{ root: null, threshold: [0.9] }
		);

	},
	destroyed() {
		this.io.disconnect();
	}

}
</script>
<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f4f4f4;
}

.header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
}


.header a,
.header button {
	width: 45px;
	text-align: center;
	line-height: 45px;
	font-size: 18px;
	border: none;
	background-color: transparent;
}

.header input {
	height: 30px;
	align-self: center;
	flex-grow: 1;
	margin: 0 10px;
	border-radius: 15px;
	outline: none;
	text-indent: 1em;
	border: 1px solid #b0b0b0;
	font-size: 14px;
}

.order {
	flex-shrink: 0;
	height: 40px;
	display: flex;
	justify-content: space-evenly;
}

.order-item {
	display: flex;
	align-items: center;
}

.order-item.active {
	color: red;
}

.order-item span {
	font-size: 14px
}

.order-item i {
	font-size: 18px;
}

.content {
	flex-grow: 1;
	border-top: 1px solid #b0b0b0;
	overflow: auto;
}

.content ul li .a {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.content-img {
	width: 126px;
	height: 126px;
}

.name {
	font-size: 14px;
	color: black;

}

.brief {
	width: 276px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.price {
	font-size: 16px;
	color: red;
}

.sale {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
}

p.tip {
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>